import "../static/libs/flexible"
import "../scss/common.scss"
import "../scss/personalCenter.scss"
import http from "../utils/http"

let iconPath = null
//本地储存的学生id
const { _id } = JSON.parse(localStorage.getItem("userInfo") || "{}")

async function main() {
    const { data } = await http({ url: "/users/getUserInfo" })
    console.log(data);
    //渲染姓名
    renderName(data)
    //点击跳转
    jump()
    // 修改用户信息
    Modification()

    //修改头像
    ModifyingAvatar()
}
main()

//修改头像
function ModifyingAvatar() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}")
    if (userInfo._id) {
        if (userInfo.avatar) {
            console.log(13);
            $(".img").attr("src", "http://127.0.0.1:3001/images/" + userInfo.avatar)
        }
    }
    $("[name=file]").on("change", function (event) {

        console.log(event);
        //点击按钮后获取多个文件
        const files = event.target.files
        console.log(files);
        //每次获取文件后，核心属性 size name type
        const file = files[0]
        //判断文件大小，如果超过500kb不允许上传
        if ((file.size / 1024) > 500) {
            alert("文件不能超过500kb")
        } else {
            //文件上传，需要一个对象，将文件放在对象中，提交后端
            //文件上传需要将文件转化为二进制流，FormData会默认按照二进制来提交
            const formData = new FormData()
            //第一个参数，后端告诉你的，
            //第二个参数，上传的文件是谁
            formData.append("file", file)

            $.ajax({
                url: "http://127.0.0.1:3001/file/upload",
                method: "POST",
                data: formData,
                success(msg) {
                    console.log(msg);
                    iconPath = msg.data
                    if (msg.code) {
                        $(".img").attr("src", "http://127.0.0.1:3001/temp/" + msg.data)
                    }
                },
                error(err) {
                    console.log(err);
                },
                //防止jQuery默认对传输的数据进行格式化处理
                contentType: false,
                processData: false,
                cache: false

            })
            $(".center .bc").on("click", async function () {
                console.log(iconPath);
                let id = userInfo._id
                const { code } = await http({ url: "/users/updateUserIcon", method: "POST", data: { avatar: iconPath, id } })
                if (code) {
                    const result = await http({ url: "/users/getUserInfo" })
                    console.log(result.data);
                    const userInfo = result.data
                    localStorage.setItem("userInfo", JSON.stringify(userInfo))
                    alert("修改成功")
                }
            })
        }
    })
}

//渲染姓名
function renderName(data) {
    $(".xinxi .p1").text(data.name)
}

// 修改用户信息
function Modification() {
    $(".center .bc").on("click", async function () {
        let username = $(".center .username").val()
        let gender = $("[name='gender']:checked").val()
        console.log(username);
        console.log(gender)
        const { data } = await http(
            {
                url: "/users/updateUserInfo",
                method: "POST",
                data: { studentId: _id, gender, name: username }
            }
        )
        localStorage.setItem("userInfo", JSON.stringify(data))
        renderName(data)
    })

}

//点击跳转
function jump() {
    $(".header .head_right").on("click", function () {
        if ($(".header .wrapper").css("display") == "none") {
            $(".header .wrapper").css("display", "block")
            $(".header .wrapper .menu li").on("click", function () {
                const text = $(this).text()
                console.log(text);
                if (text == "首页") {
                    window.location.assign("index.html")
                } else if (text == "错题本") {
                    window.location.assign("errors.html")
                } else if (text == "收藏夹") {
                    window.location.assign("collection.html")
                } else if (text == "登录") {
                    window.location.assign("login.html")
                } else if (text == "个人中心") {
                    window.location.assign("personalCenter.html")
                }
            })
        } else {
            $(".header .wrapper").css("display", "none")
        }
    })
}